<template>
  <ul>
    <li>id:{{messageDetail.id}}</li>
    <li>title:{{messageDetail.title}}</li>
    <li>content:{{messageDetail.content}}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        messageDetail: {}
      }
    },
    mounted () {
      setTimeout(() => {
        this.allMessageDetail = [
          {
            id: 2,
            title: 'message02',
            content: 'message02 content ...'
          },
          {
            id: 4,
            title: 'message04',
            content: 'message04 content ...'
          },
          {
            id: 6,
            title: 'message06',
            content: 'message06 content ...'
          }
        ]
        const id = this.$route.params.id * 1
        this.messageDetail = this.allMessageDetail.find(item => item.id === id)
      }, 1000)
    },
    watch: {
      $route: function (value) {
        const id = value.params.id * 1
        this.messageDetail = this.allMessageDetail.find(item => item.id === id)
      }
    }
  }
</script>

<style>

</style>
